<template>
    <div>
        <el-form ref="form" :model="form" :disabled="form.disabled" label-width="100px">
            <el-form-item label="项目名称">
                <el-input
                  style="width:220px"
                  v-model="form.name"
                  placeholder="项目名称">
                </el-input>
            </el-form-item>
            <el-form-item label="年度">
                 <el-date-picker
                  v-model="form.year"
                  type="year"
                  placeholder="选择年">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="所属市县">
                 <el-cascader
                    v-model="form.shixian"
                    :options="data"
                    :props="{value: 'name', label: 'name', children: 'children', checkStrictly: true}"
                    @change="handleChange"></el-cascader>
            </el-form-item>
             <el-form-item label="水保经费落实情况表" label-width="140px">
                <el-link @click="fundsVisible = true" type="primary" icon=" el-icon-document"></el-link>
            </el-form-item>
            <div  class="dialog-footer"v-if="!form.disabled">
                <el-button @click="saveEdit">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </div>
        </el-form>
        <el-dialog title="经费表" :visible.sync="fundsVisible" width="800px" :append-to-body="true">
            <funds></funds>
        </el-dialog>
    </div>
</template>
<script>
import {data} from '@/components/common/area';
import funds from './funds';
export default {
    components: {
        funds
    },
    props: {
        editVisible: {
            default : false
        },
        form: {
            default: () => {},
        },
    },
    data() {
        return{
            form: {},
            data: data,
            fundsVisible: false 
        }
    },
    methods: {
        saveEdit() {
            this.$emit('close')
        }
    }
}
</script>
<style scoped>
    .dialog-footer {
        text-align: right
    }
</style>